<template>
  <div class="tab-page">
    <div class="tab-head">
      <div
        v-for="tab in head"
        :key="tab.id"
        :class="['head-item', modelValue == tab.id ? 't-active' : '']"
        @click="select(tab)"
        v-env="tab.envTab || 'all'"
        v-permission="tab.permission || 'all'"
      >
        {{ tab.text }}
      </div>
    </div>
    <div class="tab-body">
      <template v-if="keepAlive">
        <keep-alive>
          <component :is="activeComp" :exclude="exclude" :tabId="modelValue" />
        </keep-alive>
      </template>
      <template v-else>
        <component :is="activeComp" :tabId="modelValue" />
      </template>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";

let props = defineProps({
  head: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: String,
    default: "",
  },
  keepAlive: {
    type: Boolean,
    default: false,
  },
  exclude: {
    type: [Array, String],
    default: () => [],
  },
});
let emit = defineEmits(["update:modelValue"]);
let activeComp = computed(() => {
  let comp = "";
  props.head.some((t) => {
    if (t.id == props.modelValue) {
      comp = t.component;
    }
  });
  return comp;
});

function select(tab) {
  emit("update:modelValue", tab.id);
}
</script>
<style lang="scss" scoped>
$bs-color: 0px 0px 6px 0px rgba(0, 0, 0, 0.1) inset;
.tab-page {
  width: 100%;
  height: 100%;
  user-select: none;
  .tab-head {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    box-shadow: $bs-color;
    .head-item {
      height: 40px;
      line-height: 40px;
      min-width: 100px;
      padding: 0 20px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      color: #999;
    }
    .t-active {
      color: #fff;
      background-color: #0084fe;
    }
  }
  .tab-body {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>
